<template>
    <el-tabs type="border-card" v-if="keyObjectRef">
        <el-tab-pane label="基本信息">
            <el-form label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="keyObjectRef!.name"></el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input
                        disabled
                        v-model="keyObjectRef!.parent_name"></el-input>
                </el-form-item>
                <el-form-item label="坐标">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-input
                                v-model="keyObjectRef!.loc![0]"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input
                                v-model="keyObjectRef!.loc![1]"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <el-input
                                v-model="keyObjectRef!.loc![2]"></el-input>
                        </el-col>
                        <el-col :span="6">
                            <CesiumPicker v-model:loc="keyObjectRef!.loc" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="图标">
                    <!-- <el-input v-model="keyObjectRef!.icon"></el-input> -->
                    <symbol-select v-model="keyObjectRef!.icon"></symbol-select>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="扩展信息">
            <el-scrollbar style="height: 500px">
                <FormCreator
                    v-model:form-value="fcFormValue"
                    :rule="fcFormRule"></FormCreator>
            </el-scrollbar>
        </el-tab-pane>
    </el-tabs>
    <el-empty v-if="!keyObjectRef"></el-empty>
    <n-space justify="end" style="margin-top: 10px">
        <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
    </n-space>
</template>

<script setup lang="ts">
import { ICatalog, IKeyObject } from '@/types/keyobject'
import { onMounted, ref, watch } from 'vue'
import useFcFormHelper from './FcForm/hooks/useFcFormHelper'
import FormCreator from './FcForm/FormCreator.vue'
import CesiumPicker from './Cesium/CesiumPicker.vue'
import SymbolSelect from './SymbolSelect.vue'

const fcFormRule = ref<string>(`[]`)
const fcFormValue = ref<any[]>([])

const { getRuleStr, toJson } = useFcFormHelper()

const props = defineProps<{
    keyobject?: IKeyObject
    catalog?: ICatalog
}>()

const emit = defineEmits<{
    submit: [keyobject: Partial<IKeyObject>]
}>()

onMounted(() => {
    fcFormRule.value = getRuleStr(props.keyobject)

    if (props.catalog) {
        keyObjectRef.value = getKeyObjectInfo(props.catalog)
    } else {
        keyObjectRef.value = getKeyObjectInfo(props.keyobject!)
    }
})

watch(props, () => {
    if (props.catalog) {
        keyObjectRef.value = getKeyObjectInfo(props.catalog)
        fcFormRule.value = getRuleStr(props.catalog)
    } else if (props.keyobject) {
        keyObjectRef.value = getKeyObjectInfo(props.keyobject!)
        fcFormRule.value = getRuleStr(props.keyobject)
    } else {
        console.warn('error')
    }
})

const keyObjectRef = ref<Partial<IKeyObject>>()

function isCatalog(obj: any): obj is ICatalog {
    return !('attrs' in obj)
}

function isKeyObject(obj: any): obj is IKeyObject {
    return 'attrs' in obj
}

function getKeyObjectInfo(obj: IKeyObject | ICatalog) {
    let _obj: Partial<IKeyObject>

    if (isKeyObject(obj)) {
        _obj = { ...obj }
    } else {
        const fields = getRuleStr(obj)

        const { id, icon, name } = obj
        _obj = {
            name: '',
            loc: [0, 0, 0],
            parent_id: id,
            icon: icon ?? '',
            parent_name: name,
            hdrs: {
                fields: fields,
            },
            attrs: '',
        }
    }

    return _obj
}

function handleSubmit() {
    const fields = toJson(fcFormValue.value)
    console.log('fcFormValue.value', fcFormValue.value)
    const object: Partial<IKeyObject> = {
        ...keyObjectRef.value,
        hdrs: {
            fields: fields,
        },
    }

    emit('submit', object)
}
</script>
